<template>
  <div class="container">
    <!-- tool start -->
    <el-form :model="formInline" label-width="120px" @keyup.enter.native="search">
      <el-row>
        <el-col :span="8">
          <el-form-item :label="$t('m.otherstore.outstoragecode')">
            <el-input maxlength="20" show-word-limit v-model="formInline.outboundcode"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item :label="$t('m.state')">
            <el-select v-model="formInline.state">
              <el-option
                v-for="(item,index) in stateOptions"
                :key="index"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item :label="$t('m.in.consignor')">
            <el-input maxlength="20" show-word-limit v-model="formInline.consignorname"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item :label="$t('m.createdate')" class="date-picker">
            <el-date-picker
              v-model="creatdate"
              type="daterange"
              value-format="yyyy-MM-dd"
              range-separator="-"
              :start-placeholder="$t('m.otherstore.startdate')"
              :end-placeholder="$t('m.otherstore.enddate')"
            ></el-date-picker>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item :label="$t('m.otherstore.auditdate')" class="date-picker">
            <el-date-picker
              v-model="auditdate"
              type="daterange"
              value-format="yyyy-MM-dd"
              range-separator="-"
              :start-placeholder="$t('m.otherstore.startdate')"
              :end-placeholder="$t('m.otherstore.enddate')"
            ></el-date-picker>
          </el-form-item>
        </el-col>
        <el-col :span="24" align="right">
          <el-button type="primary" @click="search" v-if="hasPermission('search')">{{$t('m.query')}}</el-button>
          <el-button type="primary" @click="storageWriteInPopupVisible=true" v-if="hasPermission('add')">{{$t('m.add')}}</el-button>
          <el-button type="primary" @click="review()" v-if="hasPermission('examine')">{{$t('m.in.check')}}</el-button>
        </el-col>
      </el-row>
    </el-form>
    <!-- tool end -->

    <!-- table数据展示 start -->
    <el-form label-width="120px">
      <el-table
        ref="table"
        stripe
        empty-text
        fit
        v-loading="tableLoading"
        class="table-wrap single-select-table"
        :data="tableData"
        :row-style="tableRowStyle"
        :row-class-name="tableRowClassName"
        @row-click="rowClick"
        @selection-change="handleSingleSelectionChange">
        <el-table-column align="center" type="selection" width="55"></el-table-column>
        <el-table-column align="center" type="index" :label="$t('m.index')" width="50"></el-table-column>
        <el-table-column align="center" :label="$t('m.otherstore.outstoragecode')">
          <template slot-scope="scope">
            <template v-if="hasPermission('table-storageCode')">
              <el-button type="text" @click.stop="getReviewData(scope.row.outboundid)">{{scope.row.outboundcode}}</el-button>
            </template>
            <template v-else>{{scope.row.outboundcode}}</template>
          </template>
        </el-table-column>
        <el-table-column align="center" prop="state" :label="$t('m.state')">
          <template slot-scope="scope">{{scope.row.state|stateFilter}}</template>
        </el-table-column>
        <el-table-column align="center" :label="$t('m.page.warehouse')">{{$store.state.basicInfo.warehouseInfo.name}}</el-table-column>
        <el-table-column
          align="center"
          prop="totalnumber"
          :label="$t('m.otherstore.totalnumber')"
        ></el-table-column>
        <el-table-column align="center" prop="consignorname" :label="$t('m.in.consignor')" show-overflow-tooltip></el-table-column>
        <el-table-column align="center" prop="creator" :label="$t('m.creator')" show-overflow-tooltip></el-table-column>
        <el-table-column align="center" prop="createdate" :label="$t('m.createdate')">
          <template slot-scope="scope">{{scope.row.createdate|dateFilter}}</template>
        </el-table-column>
        <el-table-column align="center" prop="auditor" :label="$t('m.otherstore.auditor')" show-overflow-tooltip></el-table-column>
        <el-table-column align="center" prop="auditdate" :label="$t('m.otherstore.auditdate')">
          <template slot-scope="scope">{{scope.row.auditdate|dateFilter}}</template>
        </el-table-column>
        <el-table-column align="center" :label="$t('m.operation')">
          <template slot-scope="scope">
            <el-button
              v-if="(scope.row.state===1||scope.row.state===2)&&hasPermission('table-edit')"
              type="text"
              @click.stop="handleEdit(scope.row.outboundid)"
            >{{$t('m.edit')}}</el-button>
            <el-button
              v-if="scope.row.state!==3&&hasPermission('table-delete')"
              type="text"
              style="color:#f56c6c"
              @click.stop="handleDelete(scope.row.outboundid)"
            >{{$t('m.delete')}}</el-button>
          </template>
        </el-table-column>
      </el-table>

      <el-pagination
        background
        layout="sizes, prev, pager, next, jumper"
        :page-sizes="pageSizeList"
        :page-size="rowSize"
        :current-page="page"
        :total="totalRows"
        @current-change="currentChange"
        @size-change="handleSizeChange">
      </el-pagination>
    </el-form>
    <!-- table数据展示 end -->

    <el-dialog
      :title="$t('m.noticemessage')"
      :visible.sync="tipsDialogVisible"
      width="30%"
      center
      append-to-body>
      <p align="center">{{$t('m.deleteAlert')}}</p>
      <span slot="footer" class="dialog-footer">
        <el-button size="mini" @click="tipsDialogVisible=false">{{$t('m.cancel')}}</el-button>
        <el-button size="mini" type="primary" @click="removeRow">{{$t('m.confirm')}}</el-button>
      </span>
    </el-dialog>

    <!-- 其他出库单:新增&&编辑dialog start -->
    <storageWriteInPopup
      v-if="storageWriteInPopupVisible"
      :popupVisible="storageWriteInPopupVisible"
      :detail="storageWriteInPopupData"
      @successCallback="getData"
      @close="storageWriteInPopupVisible=false;storageWriteInPopupData=''"
    ></storageWriteInPopup>
    <!-- 其他出库单:新增&&编辑dialog end -->

    <!-- 审核dialog start -->
    <storageReviewPopup
      v-if="storageReviewPopupVisible"
      :popupVisible="storageReviewPopupVisible"
      :detail="storageReviewPopupData"
      :isReview="isReview"
      @successCallback="getData"
      @close="storageReviewPopupVisible=false;storageReviewPopupData={}"
    ></storageReviewPopup>
    <!-- 审核dialog end -->
  </div>
</template>
<script>
import storageWriteInPopup from '@/components/otherStorage/out/storage-write-in-popup'
import storageReviewPopup from '@/components/otherStorage/out/storage-review-popup'
let __this
export default {
  name:'putInStorage',
  provide(){
    return {
      getReviewState:this.getReviewState
    }
  },
  data(){
    return {
      formInline:{
        outboundcode:'', // 出库单号
        state:'', // 状态
        consignorname:'' // 货主
      },
      creatdate:[], // 创建时间
      auditdate:[], // 审核时间

      tableData:[],

      storageWriteInPopupVisible:false, // 控制其他出库单dialog显示隐藏
      storageWriteInPopupData:'',
      storageReviewPopupVisible:false, // 控制审核dialog显示隐藏
      storageReviewPopupData:{},
      isReview:false,
      tipsDialogVisible:false,
      currentOutboundid:0
    }
  },
  beforeCreate(){
    __this = this
  },
  async mounted(){
    this.getData()
  },
  computed:{
    stateOptions(){
      return [
        { value:'', label:this.$t('m.all') },
        { value:1, label:this.$t('m.in.state1') },
        { value:2, label:this.$t('m.in.state2') },
        { value:3, label:this.$t('m.shelves.state5') }
      ]
    },
    dateRange(){
      let [createdatestart, createdateend] = this.creatdate || Array.from(2)
      let [auditdatestart, auditdateend] = this.auditdate || Array.from(2)
      return {
        createdatestart, //创建时间-start
        createdateend, //创建时间--end
        auditdatestart, //审核时间--start
        auditdateend //审核时间--end
      }
    }
  },
  components:{ storageWriteInPopup, storageReviewPopup },
  filters:{
    stateFilter(val){
      return __this.stateOptions[val]?__this.stateOptions[val].label:'unknown'
    }
  },
  methods:{
    search(){
      this.page = 1
      this.getData()
    },
    getData(){
      let options = {
        method:'get',
        url:'/otheroutbound/page',
        params:Object.assign({}, this.formInline, this.dateRange,{
          page:this.page,
          rows:this.rowSize
        })
      }
      this.tableLoading = true
      this.$axios(options).then(({ data }) => {
        this.tableData = data.records
        this.totalRows = data.total
        setTimeout(()=>this.tableLoading=false,500)
        if (!this.tableData.length)
          return this.callbackMessage(this.$t('m.nodata'))
        this.tableData = this.tableData.map(item => {
          if (!('auditor' in item)) item.auditor = '---'
          return item
        })
      })
    },
    // 获取出库单信息
    async getStorageData(id, key){
      let options = {
        method:'get',
        url:`/otheroutbound/${id}`
      }
      await this.$axios(options).then(({ data }) => {
        if (key) this[`${key}PopupData`] = data
      })
    },
    // 返回是否为审核状态，子组件要用到
    getReviewState(){
      return this.isReview
    },
    // 根据出库单id查看详情
    async getReviewData(id){
      this.isReview = false
      await this.getStorageData(id, 'storageReview')
      this.storageReviewPopupVisible = true
    },
    // 审核
    async review(){
      if (!this.tableData.length) return this.callbackMessage(this.$t('m.otherstore.outstep'))
      if (!this.tableRowSelected.length) return this.callbackMessage(this.$t('m.otherstore.choose'))
      if (this.tableRowSelected[0].state === 2) return this.callbackMessage(this.$t('m.otherstore.cannot'))
      if (this.tableRowSelected[0].state === 3) return this.callbackMessage(this.$t('m.otherstore.passed'))
      this.isReview = true
      await this.getStorageData(
        this.tableRowSelected[0].outboundid,
        'storageReview'
      )
      this.storageReviewPopupVisible = true
    },
    // 编辑
    async handleEdit(id){
      await this.getStorageData(id, 'storageWriteIn')
      this.storageWriteInPopupVisible = true
    },
    // 删除
    handleDelete(id){
      this.currentOutboundid = id
      this.tipsDialogVisible = true
    },
    removeRow(){
      let id = this.currentOutboundid
      let options = {
        method:'delete',
        url:`/otheroutbound/${id}`
      }
      this.$axios(options).then(({ message }) => {
        this.callbackMessage(message)
        this.tipsDialogVisible = false
        this.getData()
      })
    }
  },
  beforeRouteLeave(to, form, next){
    this.tipsDialogVisible=false
    this.storageWriteInPopupVisible=false
    this.storageReviewPopupVisible=false
    next()
  }
}
</script>
<style lang="scss" scoped>
.container ::v-deep .el-select {
  width: 100%;
}
.date-picker ::v-deep .el-range-editor {
  width: 100%;
}
</style>